import toggle from '../../examples/files/core_components/toggle.js'
import flexbox from '../../examples/files/core_components/flexbox.js'

Components specify the layout of their children using the **flexbox** algorithm. With flexbox we can specify a layout that expands or shrinks to fill screens of various dimensions. We can seamlessly mix and match these automatic layouts with fixed sizes like `width: 100`.

> Under the hood, flexbox is implemented with the library [Yoga](https://yogalayout.com/).

---

## Properties

To choose the right layout for a component's children, we must make 3 choices:

| Property         | Default      | Options                                                     | Description                                                                                                                                                                                                                                          |
| ---------------- | ------------ | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `flexDirection`  | `column`     | `row, column`                                               | Do we want a vertical (`column`) or horizontal (`row`) layout? This choice determines the orientation of the **primary axis** of our layout.                                                                                                         |
| `justifyContent` | `flex-start` | `flex-start, center, flex-end, space-around, space-between` | How should the content be distributed along the **primary axis** of our layout? Should it be at the start, the center, the end, or spaced evenly?                                                                                                    |
| `alignItems`     | `stretch`    | `flex-start, center, flex-end, stretch`                     | How should the content be aligned along the **secondary axis** of our layout? (If the primary axis is `row`, then the secondary axis is `column`, and vice versa) Should content be aligned at the start, the center, the end, or stretched to fill? |

---

## Example

The following example lets you try all the possible combinations of flexbox properties and layouts.

<Example
  height={800}
  files={{
    'App.js': flexbox,
    'Toggle.js': toggle,
  }}
/>
